<div class="admin-biaogelist">

    <div class="listbiaoti am-cf">
        <ul class="am-icon-flag on">轮次接取任务</ul>


        <!--<dl>
          <button type="button" class="am-btn am-btn-danger am-round am-btn-xs am-icon-plus" > 补充线订单</button>
        </dl>-->
        <!--这里打开的是新页面-->

    </div>

    <div class="fbneirong" style="min-height: 790px" id="lunci">

        <div class="hang">
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="获取任务数量" style="width: auto;overflow: auto;float: left">

                    <el-input-number v-model="form.epage" @change="handleChange" :min="1" :max="20"
                                     label="任务数量"></el-input-number>
                    <el-button size="small" type="primary" @click="gettask">获取任务</el-button>
                </el-form-item>


                <el-form-item label="重置轮次" style="width: auto;overflow: auto;float: left">

                    <el-button size="small" type="primary" @click="onSubmit">重置轮次</el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="任务序号">
                <el-pagination
                        style="width: 500px;float: left"

                        background
                        @size-change=""
                        @current-change="current_change"
                        layout="prev, pager, next"
                        :page-size="1"
                        :total="total">
                </el-pagination>
            </el-form-item>
            <div class="top">
                <div class="half">
                    <el-form-item label="商品标题">
                        <el-input size="small" v-model="info.goods_name" class="long" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="店铺名">
                        <el-input size="small" v-model="info.shop_name" class="long" readonly></el-input>
                    </el-form-item>


                    <el-form-item label="链接">
                        <el-input size="small" v-model="info.link" class="long" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="商品价格">
                        <el-input size="small" v-model="info.price" class="mid" readonly>
                            <template #append>￥</template>
                        </el-input>
                    </el-form-item>

                    <el-form-item label="订单类型">
                        <el-radio-group v-model="info.type_h" readonly>
                            <el-radio v-for="(value,key) in typelist" v-show="key==info.type_h" :label="key">{{value}}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="商品数量">
                        <el-input size="small" v-model="info.number" class="mid" readonly>
                            <template #append>件</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="开团类型">
                        <el-radio-group v-model="info.pay_type" readonly>
                            <el-radio v-for="(value,key) in pay_typelist" v-show="key==info.pay_type" :label="key">
                                {{value}}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="付款金额">
                        <el-input size="small" v-model="(info.price*info.number).toFixed(2)" class="mid" readonly>
                            <template #append>￥</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="性别选择" v-show="info.type_h==1&&info.sex!=0">
                        <el-radio-group v-model="info.sex" readonly>
                            <el-radio v-for="(value,key) in sexlist" v-show="key==info.sex" :label="key">
                                {{value}}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="个性设置" v-show="info.type_h==1&&gexing.length>0">
                        <el-tag
                                v-for="(value,key)  in gexinglist"
                                :key="key"
                                closable
                                v-show="gexing.indexOf(key)>-1"
                        >
                            {{value}}
                        </el-tag>
                    </el-form-item>


                </div>

                <div class="half" style="height:250px;max-width: 300px ">
                    <el-image style="width: 100%;height: 100%" :src="info.picurl"></el-image>
                </div>
            </div>


            <div class="hang" style="margin-bottom: 3px">
                <el-form-item label="关键词">
                    <el-input size="small" v-model="info.keyword" class="long" readonly></el-input>
                </el-form-item>

                <el-form-item label="SKU">
                    <el-input size="small" v-model="info.sku" class="long" readonly></el-input>
                </el-form-item>
            </div>
            <div class="clear"></div>
            <div class="hang" style="margin-bottom: 3px">
                <el-form-item label="实际付款">
                    <el-input size="small" style="margin-top: 7px" v-model="info.real_pric" class="mid"
                              placeholder="请输入实际付款">
                        <template #append>￥</template>
                    </el-input>
                </el-form-item>

                <el-form-item label="awz标识">
                    <el-input size="small" v-model="info.awz" class="mid" placeholder="请输入awz"></el-input>
                </el-form-item>
            </div>
            <div class="hang">
                <el-form-item label="订单号">
                    <el-input size="small" v-model="info.orderid" maxlength="22" minlength="22" class="mid"></el-input>
                </el-form-item>

                <el-form-item label="收货地址" v-show="info.daifa==1">
                    <el-input size="small" v-model="info.addrees" class="long"></el-input>
                </el-form-item>
            </div>

            <el-form-item>
                <el-button type="success" @click="onSubmit" :disabled="info.end">提交任务</el-button>
                <el-button type="primary"  @click="onSubmit" :disabled="info.end">替换任务</el-button>
                <el-button type="danger"   @click="onSubmit" :disabled="info.end">放弃任务</el-button>
            </el-form-item>
        </el-form>
    </div>
    <script>

        new Vue({
            el: '#lunci',
            filters: {
                statusFilter(status) {
                    const statusMap = {
                        0: 'gray',
                        1: 'success',
                        2: 'success',
                        3: 'info',
                        4: 'danger',
                    };
                    return statusMap[status]
                }
            },
            data() {
                return {
                    on_request: false,
                    modle: 1,
                    total: 0,
                    epage: 1,
                    page: 1,
                    list: [],
                    gexing: [],
                    info: {
                        link: "",
                        goods_name: '',
                        shop_name: "",
                        real_pric: "",
                        price: "",
                        picurl: "http://local.hunter.com/public/uploads/pic/2021-03-17/1615961882.jpg",
                        type_h: "",
                        number: "",
                        keyword: "",
                        sku: "",
                        remarks: "",
                        awz: "",
                        orderid: "",
                        addrees: "",
                        gexing: [],
                        sex: "",
                        end: false,
                    },
                    form: {
                        turn: 1,
                        epage: 10,
                        region: '',
                        date1: '',
                        date2: '',
                        delivery: false,
                        type: [],
                        resource: '',
                        desc: ''
                    },
                    typelist: {
                        1: '普通单',
                        2: '高留评单',
                        3: 'DSR单',
                        4: '拼多多直播',
                    },
                    pay_typelist: {
                        1: '全部开团',
                        2: '单独购买',
                        3: '优先参团',
                    },
                    sexlist: {
                        0: '男女随意',
                        1: '男号',
                        2: '女号',
                    },
                    gexinglist: {
                        'chat': '假聊',
                        'compare': '货比三家',
                        'collection': '收藏商品收藏店铺',
                        'sign': '签收',
                        'overnight': '隔夜收藏',
                    }


                }
            },
            created() {
                this.gettask();
            },
            methods: {
                gettask() {
                    let post = this.form;
                    let that = this;
                    post.page = this.page;
                    var url = "<?php echo base_url(); ?>/hunter/getTurnTask";
                    $.ajax({
                        url: url,
                        type: "POST",
                        dataType: "json",
                        data: post,
                        success: function (res) {
                            if (res.code != 0) {
                                that.$message({
                                    message: res.msg,
                                    type: 'warning',
                                    offset: 300,
                                    duration: 1500
                                });
                            } else {
                                that.list = res.list;
                                that.total = res.count;
                                that.info = that.list[that.page];
                                that.setinfo();
                            }
                        }
                    })
                },
                onSubmit() {
                    if (this.on_request) {
                        return;
                    }
                    var url = "<?php echo base_url(); ?>Hunter/finnish";
                    var postdata = {
                        'real_price': this.info.real_price,
                        'awz': this.info.awz,
                        'id': this.info.id,
                        'project': 2,
                        'orderid': this.info.orderid,
                        'addrees': this.info.addrees,
                    };
                   // this.list[this.page] = this.info;
                    that.on_request = true;
                    let that = this;
                    $.post(url, postdata, function (data) {
                        that.on_request = false;
                        if (data.code == 0) {
                            that.info.end = true;
                            //that.list[that.page] = that.info;
                            if (that.checklist) {


                            } else {
                                that.$message({
                                    message: "完成任务",
                                    type: 'success',
                                    offset: 300,
                                    duration: 1500
                                });
                            }
                        }else{
                            that.$message({
                                message: data.msg,
                                type: 'warning',
                                offset: 300,
                                duration: 1500
                            });
                        }
                    }, 'json');
                },
                current_change(page) {
                    this.page = page;
                    this.info = this.list[this.page];
                    this.setinfo();
                },
                checklist() {//检查是否是所有任务均完成
                    let isend = false;
                    $.each(this.list, function (i, v) {
                        isend = v.end;
                        if (!isend) {
                            return false;
                        }
                    })
                    return isend;
                },
                setinfo() {
                    let that = this;
                    $.each(this.gexinglist, function (i, v) {
                        if (that.info[i]) {
                            that.gexing.push(i);
                        }
                    });
                },
                handleChange(file, fileList) {

                },

            }
        })
    </script>

    <style>
        .top {
            height: auto;
            overflow: hidden;
        }

        .hang {
            width: 100%;
            height: auto;
            overflow: hidden;
            margin-bottom: 20px;
        }

        .hang .el-form-item {
            width: auto;
            float: left;
        }

        .hang:after {
            clear: both;
            content: "";
        }

        .clear {
            clear: both;
        }

        .el-radio__input.is-checked + .el-radio__label {

        }

        .el-radio__input.is-checked .el-radio__inner {

        }

        .half {
            width: 50%;
            float: left;
            max-width: 550px;
        }

        .half .el-form-item {
            width: auto;
            float: left;
            min-width: 180px;
        }

        .el-form-item {
            margin-bottom: 2px;
        }

        .long {
            width: 400px;
        }

        .mid {
            width: 200px;
        }

        .small {
            width: 100px;
            float: left;
        }

        .el-tag {
            margin-left: 5px;
        }

        .demonstration {
            display: block;
            color: #366bbb;
            font-size: 16px;
            margin-bottom: 5px;
            text-align: center;
        }

        .gexing {
            color: #366bbb;
            border: solid 1px #366bbb;
            padding: 3px;
            border: -r;
        }
    </style>
